<template>
  <div class="demo-content">
    <h1>使用控件改变元素</h1>
    <section class="demo-text">
      <el-row>
        <el-col :span="18">
          <canvas id="canvas" width="1200" height="600" ref="canvas"></canvas>
        </el-col>
        <el-col :span="4" v-if="activeobject">
          <div class="block" v-for="item,index in dataobject" :key="'o'+index">
            <span class="demonstration">{{item.type}}</span>
            <el-slider
              v-model="item.value"
              :min="item.min"
              :max="item.max"
              @input="handlechange"
              :step="item.step"
            ></el-slider>
            <span style="float:right">{{item.value}}</span>
            <!-- <input type="range" v-model="item.value" :min="item.min" :max="item.max" @input="handlechange" :step="item.step"> -->
          </div>
          <el-input
            v-for="item in attrlist"
            v-model="item.value"
            placeholder="请输入内容"
            @change="changeLabel"
           :key="item.value"></el-input>
        </el-col>
      </el-row>
      <p style="text-align:right;padding-right:60px">@王睿杰 2019.1.23</p>
    </section>
  </div>
</template>
<script>
import {fabric} from  "@/js/fabric";
export default {
  data() {
    return {
      canvas: null,
      list: 10,
      activeobject: null,
      attrlist: [
        {
          key: "label",
          value: ""
        }
      ],
      dataobject: [
        {
          type: "angle",
          value: 0,
          min: 0,
          max: 360,
          step: 10
        },
        {
          type: "left",
          value: 0,
          min: 0,
          max: 1200,
          step: 10
        },
        {
          type: "top",
          value: 0,
          min: 0,
          max: 600,
          step: 10
        },
        {
          type: "scaleX",
          value: 0,
          min: 0.1,
          max: 3,
          step: 0.1
        },
        {
          type: "scaleY",
          value: 0,
          min: 0.1,
          max: 3,
          step: 0.1
        }
      ]
    };
  },
  methods: {
    changeLabel(value) {
      let _this = this;
      _this.activeobject.set("label", value).setCoords();
      _this.canvas.requestRenderAll();
    },
    handlechange(value) {
      let _this = this;
      //   if(!_this.activeobject){
      //       return;
      //   }
      this.dataobject.forEach(function(item) {
        _this.activeobject
          .set(item.type, parseFloat(item.value, 10))
          .setCoords();
      });
      _this.canvas.requestRenderAll();
    }
  },
  watch: {
    deep: true,
    activeobject(newvalue, oldvalue) {
      let key = newvalue || {};
      this.dataobject.map(function(item) {
        item.value = parseFloat(key[item.type], 10);
        // console.log(key, "sssssss");
        // return item;
      });
      this.attrlist.map(function(item) {
        item.value = key[item.key];
      });
    }
  },
  computed: {},
  mounted() {
    let _this = this;
    this.$nextTick(() => {
      var canvas = (_this.canvas = new fabric.Canvas("canvas"));

      // create a rectangle object
      var rect = new fabric.Rect({
        left: 100,
        top: 50,
        fill: "#D81B60",
        width: 100,
        height: 100,
        strokeWidth: 2,
        stroke: "#880E4F",
        rx: 10,
        ry: 10,
        angle: 45,
        hasControls: true,
        label:"Rect1",
        labelStyle :{
            position:"top,left",
            align:'right'
        }
      });

      canvas.add(rect);
      // create a rectangle object
      var rect2 = new fabric.Rect({
        left: 200,
        top: 50,
        fill: "#F06292",
        width: 100,
        height: 100,
        strokeWidth: 2,
        stroke: "#880E4F",
        rx: 10,
        ry: 10,
        angle: 45,
        hasControls: true,
        label: "abc",
        labelStyle: {
          FontSize: 18,
          Color:"blue",
           position:"top,right"
        }
      });

      canvas.add(rect2);
      var circle1 = new fabric.Circle({
        radius: 65,
        fill: "#039BE5",
        left: 0
      });

      var circle2 = new fabric.Circle({
        radius: 65,
        fill: "#4FC3F7",
        left: 110,
        opacity: 0.7
      });

      var group = new fabric.Group([circle1, circle2], {
        left: 40,
        top: 250,
        label:"Group",
        labelStyle:{
            position:"top,center"
        }
      });

      canvas.add(group);
      canvas.on("mouse:down", function(e) {
        _this.activeobject = e.target;
      });
      canvas.on("selection:created", function(e) {
        _this.activeobject = e.target;
      });
      function updateControls(e) {
        _this.activeobject = null;
        _this.activeobject = e.target;
      }
      canvas.on({
        "object:moving": updateControls,
        "object:scaling": updateControls,
        "object:resizing": updateControls,
        "object:rotating": updateControls,
        "object:skewing": updateControls
      });
      canvas.on("selection:updated", function(e) {
        if (canvas.getActiveObject() != null) {
          _this.activeobject = null;
          _this.activeobject = e.target;
        }
      });
      _this.activeobject = canvas.getActiveObject();
      canvas.setActiveObject(rect, "activeSelection");
      function renderLabel(ctx, item) {
        if (ctx && !!item.label) {
          ctx.font = "12px Arial";
          //   ctx.translate(0,0);
          ctx.translate(item.left, item.top);
          ctx.rotate((item.angle * Math.PI) / 180);
          ctx.save();
          ctx.beginPath();
          ctx.fillText(item.label, 0, 0);
          ctx.closePath();
          //
          ctx.rotate((-item.angle * Math.PI) / 180);
          ctx.translate(-item.left, -item.top);
          canvas.fire("Label:render", { label: item.label });
        }
        if (item._objects && item._objects.length > 1) {
          item._objects.forEach(function(obj) {
            renderLabel(ctx, obj);
          });
        }
      }
       rect2.on("Label:render",function(e){
           console.log(e)
       })
       canvas.on("Label:test",function(e){
           console.log(e)
           let randomNum =fabric.util.randomNum;
           var color = "rgb("+randomNum(0,255)+","+randomNum(0,255)+","+randomNum(0,255)+")"
           e.test.labelStyle.Color =color;
       })
    });
  }
};
</script>
